<template>
    <div>

        <div class="box">
            <el-carousel :interval="4000" type="card" height="132px">
            <el-carousel-item class="tubox"  v-for="( item ,index ) in imgarr"  :key="index">
                <img class="tu" :src="item.url" alt="">

  
    </el-carousel-item>
  </el-carousel>


    </div>

    <div style="text-align: center;" >
            <div  class="flex"  v-for="  item , index in imgarr" :key="index" >
                <div   class=""   >
                    <!-- <div class="left">图片</div><el-input  v-model="item.url" placeholder="请输入内容"></el-input> -->
                    <input  :index ="index"  @change ="load"  class="file"  ref="files1"  type="file"  >
                    <div class="left">图片</div>  <div @click="upload(index)" class="el-upload"    >
            <img v-if="item.url" :src="item.url" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
  </div>


                </div>
                
                <div  class="flex2">
                    <div class="left">跳转地址:</div><el-input v-model="item.link" placeholder="请输入内容"></el-input>
                </div>
              
            </div>
            <el-button @click="send" type="primary">保存</el-button>

    </div>

    </div>
</template>

<script>
import {getextension, saveextension}  from '@/api/index'
    export default {
        data() {
            return {
              
                    imgarr :[
                    { url: 'https://bossaudioandcomic-1252317822.image.myqcloud.com/activity/document/1039d8318bd6191d25e1df9e6dd5fbf2.jpg',
                        link:"",
                        goods:"13"
                }]
        
            
                    
              
            }
        },
        async  created(){
            console.log(123);
        let  {data}  =  await  getextension()
        this.imgarr = data
    }, 
    methods: {
       async send(){
             console.log(  this.imgarr );
           let reslut  =   await saveextension(this.imgarr)
           if(reslut.code==20000){
                this.$msg({
                    message:"修改成功"
                })
           }
        },

        load(value){
        console.log("触发了 文件上传");
        this.fullscreenLoading2 = true
        console.dir(value.target.files[0]);  
          if(value.target.files[0].size  >  1024000){
            const h = this.$createElement;
        this.$message({
          message: h('p', null, [
            h('span', null, '图标太大了 '),
            h('i', { style: 'color: teal' }, 'VNode')
          ])
        });
        this.fullscreenLoading2 = false 
        return
          }
       var reader = new FileReader()

       reader.onload = ()=>{
        // console.log("触发了读取文件" , reader.result );
        console.log("触发了读取文件" , value.target.getAttribute('index'));
            this.imgarr[ value.target.getAttribute('index')].url = reader.result
        // this.form.picUrl =  reader.result 
        // console.log('this.form.picUrl',this.form.picUrl);
        // this.fullscreenLoading2 = false
     
    
       }
       reader.readAsDataURL(value.target.files[0])

    
      },


       async  upload(index){
                    console.log(123);
        this.$nextTick(()=>{
          console.log(this.$refs.files1[index].click());
  })
        }
    },
    }
</script>

<style lang="scss" scoped>
.file{
    display: none;
}
.flex{
    display: flex;
    margin: 0 auto;
    width: 1200px;
    border: 1px solid #ccc;
    align-items: center;
    >div{
        flex: 1;
    }
}

.left{
    flex-shrink:0;
    line-height: 40px;
}
.flex2{
    display: flex;
   
}
.box{
    width: calc(380*2px);
    margin: 0 auto;
    .tu{
        width: 100%;
  
  
    }
}
::v-deep .tubox{
    width: 380px ;
    height: 131px;
}
  .el-carousel__item h3 {
 
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
  .avatar{
    width: 11rem;
    height: 5rem;
  }
</style>